<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>碳交易平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0E42B3',
                        success: '#00B42A',
                        danger: '#F53F3F',
                        warning: '#FF7D00',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                        carbon: '#2E7D32', // 碳主题色
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-scale {
                transition: transform 0.3s ease;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
            .gradient-bg {
                background: linear-gradient(135deg, #165DFF 0%, #0E42B3 100%);
            }
            .carbon-gradient {
                background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white sticky top-0 z-50 shadow-sm transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-leaf text-carbon text-2xl"></i>
                <span class="text-xl font-bold text-primary">碳交易平台</span>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-primary font-medium">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">碳市场</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">交易中心</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">项目开发</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">资讯中心</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">政策法规</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative hidden md:block">
                    <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <button class="bg-primary text-white px-4 py-2 rounded-full hover:bg-secondary transition-colors hidden md:block">
                    登录 / 注册
                </button>
                
                <button class="md:hidden text-gray-600 text-xl" id="menu-toggle">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden h-0 overflow-hidden transition-all duration-300" id="mobile-menu">
            <div class="px-4 py-3 space-y-3 bg-white">
                <a href="#" class="block text-primary font-medium py-2">首页</a>
                <a href="#" class="block text-gray-600 hover:text-primary transition-colors py-2">碳市场</a>
                <a href="#" class="block text-gray-600 hover:text-primary transition-colors py-2">交易中心</a>
                <a href="#" class="block text-gray-600 hover:text-primary transition-colors py-2">项目开发</a>
                <a href="#" class="block text-gray-600 hover:text-primary transition-colors py-2">资讯中心</a>
                <a href="#" class="block text-gray-600 hover:text-primary transition-colors py-2">政策法规</a>
                <div class="relative mt-2">
                    <input type="text" placeholder="搜索..." class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <button class="w-full bg-primary text-white px-4 py-2 rounded-full hover:bg-secondary transition-colors mt-2">
                    登录 / 注册
                </button>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="gradient-bg text-white py-16 md:py-24">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl">
                <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight mb-4">
                    推动低碳转型，<br>共建绿色未来
                </h1>
                <p class="text-[clamp(1rem,2vw,1.25rem)] text-blue-100 mb-8 max-w-2xl">
                    我们的碳交易平台致力于连接碳排放企业与减排项目，促进碳市场的高效运作，助力全球碳中和目标的实现。
                </p>
                <div class="flex flex-wrap gap-4">
                    <button class="bg-white text-primary px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors shadow-lg">
                        开始交易
                    </button>
                    <button class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white/10 transition-colors">
                        了解更多 <i class="fa fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- 市场概览 -->
    <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-end mb-8">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">碳市场概览</h2>
                    <p class="text-gray-500">实时掌握碳交易市场动态</p>
                </div>
                <a href="#" class="text-primary hover:text-secondary transition-colors hidden md:flex items-center">
                    查看全部 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <!-- 市场卡片1 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover-scale">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="text-lg font-semibold text-dark">全国碳市场</h3>
                            <p class="text-gray-500 text-sm">碳排放配额(CEA)</p>
                        </div>
                        <span class="bg-green-100 text-success px-3 py-1 rounded-full text-sm font-medium">
                            +2.4%
                        </span>
                    </div>
                    <div class="flex items-end space-x-2 mb-2">
                        <span class="text-2xl font-bold text-dark">¥58.24</span>
                        <span class="text-sm text-gray-500 mb-1">/吨</span>
                    </div>
                    <div class="h-20">
                        <canvas id="ceaChart"></canvas>
                    </div>
                </div>
                
                <!-- 市场卡片2 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover-scale">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="text-lg font-semibold text-dark">广东碳市场</h3>
                            <p class="text-gray-500 text-sm">广东碳配额(GDEA)</p>
                        </div>
                        <span class="bg-red-100 text-danger px-3 py-1 rounded-full text-sm font-medium">
                            -1.3%
                        </span>
                    </div>
                    <div class="flex items-end space-x-2 mb-2">
                        <span class="text-2xl font-bold text-dark">¥54.78</span>
                        <span class="text-sm text-gray-500 mb-1">/吨</span>
                    </div>
                    <div class="h-20">
                        <canvas id="gdeaChart"></canvas>
                    </div>
                </div>
                
                <!-- 市场卡片3 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover-scale">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="text-lg font-semibold text-dark">北京碳市场</h3>
                            <p class="text-gray-500 text-sm">北京碳配额(BEA)</p>
                        </div>
                        <span class="bg-green-100 text-success px-3 py-1 rounded-full text-sm font-medium">
                            +0.8%
                        </span>
                    </div>
                    <div class="flex items-end space-x-2 mb-2">
                        <span class="text-2xl font-bold text-dark">¥93.56</span>
                        <span class="text-sm text-gray-500 mb-1">/吨</span>
                    </div>
                    <div class="h-20">
                        <canvas id="beaChart"></canvas>
                    </div>
                </div>
                
                <!-- 市场卡片4 -->
                <div class="bg-white rounded-xl p-6 card-shadow hover-scale">
                    <div class="flex justify-between items-start mb-4">
                        <div>
                            <h3 class="text-lg font-semibold text-dark">CCER</h3>
                            <p class="text-gray-500 text-sm">国家核证自愿减排量</p>
                        </div>
                        <span class="bg-green-100 text-success px-3 py-1 rounded-full text-sm font-medium">
                            +3.7%
                        </span>
                    </div>
                    <div class="flex items-end space-x-2 mb-2">
                        <span class="text-2xl font-bold text-dark">¥42.19</span>
                        <span class="text-sm text-gray-500 mb-1">/吨</span>
                    </div>
                    <div class="h-20">
                        <canvas id="ccerChart"></canvas>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 text-center md:hidden">
                <a href="#" class="text-primary hover:text-secondary transition-colors inline-flex items-center">
                    查看全部 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 交易中心 -->
    <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-8">交易中心</h2>
            
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- 交易表单 -->
                <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-1">
                    <h3 class="text-xl font-semibold text-dark mb-6">立即交易</h3>
                    
                    <form class="space-y-5">
                        <div>
                            <label class="block text-gray-700 font-medium mb-2" for="carbon-type">
                                碳品种
                            </label>
                            <select id="carbon-type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all">
                                <option value="cea">全国碳排放配额(CEA)</option>
                                <option value="gdea">广东碳配额(GDEA)</option>
                                <option value="bea">北京碳配额(BEA)</option>
                                <option value="ccer">国家核证自愿减排量(CCER)</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-gray-700 font-medium mb-2" for="transaction-type">
                                交易类型
                            </label>
                            <div class="flex space-x-4">
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="transaction-type" value="buy" class="w-4 h-4 text-primary focus:ring-primary border-gray-300" checked>
                                    <span class="ml-2 text-gray-700">买入</span>
                                </label>
                                <label class="flex items-center cursor-pointer">
                                    <input type="radio" name="transaction-type" value="sell" class="w-4 h-4 text-primary focus:ring-primary border-gray-300">
                                    <span class="ml-2 text-gray-700">卖出</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-gray-700 font-medium mb-2" for="price">
                                交易价格(元/吨)
                            </label>
                            <input type="number" id="price" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="输入价格" value="58.24">
                        </div>
                        
                        <div>
                            <label class="block text-gray-700 font-medium mb-2" for="quantity">
                                交易数量(吨)
                            </label>
                            <input type="number" id="quantity" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="输入数量">
                        </div>
                        
                        <div>
                            <label class="block text-gray-700 font-medium mb-2" for="amount">
                                交易金额(元)
                            </label>
                            <input type="number" id="amount" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all" placeholder="自动计算" readonly>
                        </div>
                        
                        <button type="button" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-secondary transition-colors">
                            提交交易
                        </button>
                    </form>
                </div>
                
                <!-- 订单簿 -->
                <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-xl font-semibold text-dark">订单簿 - 全国碳排放配额(CEA)</h3>
                        <div class="flex space-x-2">
                            <button class="px-3 py-1 bg-primary text-white rounded-md text-sm">CEA</button>
                            <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm hover:bg-gray-200 transition-colors">GDEA</button>
                            <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm hover:bg-gray-200 transition-colors">BEA</button>
                            <button class="px-3 py-1 bg-gray-100 text-gray-600 rounded-md text-sm hover:bg-gray-200 transition-colors">CCER</button>
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 卖单 -->
                        <div>
                            <h4 class="text-gray-500 font-medium mb-3 flex items-center">
                                <i class="fa fa-arrow-down text-danger mr-2"></i> 卖单
                            </h4>
                            <div class="space-y-2 max-h-80 overflow-y-auto pr-2">
                                <div class="flex justify-between items-center p-2 bg-red-50 rounded-md">
                                    <span class="text-danger font-medium">58.50</span>
                                    <span>2,450</span>
                                    <span class="text-gray-500">143,325</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-red-50 rounded-md">
                                    <span class="text-danger font-medium">58.45</span>
                                    <span>1,870</span>
                                    <span class="text-gray-500">109,302</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-red-50 rounded-md">
                                    <span class="text-danger font-medium">58.40</span>
                                    <span>3,120</span>
                                    <span class="text-gray-500">182,208</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-red-50 rounded-md">
                                    <span class="text-danger font-medium">58.35</span>
                                    <span>950</span>
                                    <span class="text-gray-500">55,433</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-red-50 rounded-md">
                                    <span class="text-danger font-medium">58.30</span>
                                    <span>1,560</span>
                                    <span class="text-gray-500">90,948</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-red-50 rounded-md">
                                    <span class="text-danger font-medium">58.25</span>
                                    <span>2,780</span>
                                    <span class="text-gray-500">161,935</span>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 买单 -->
                        <div>
                            <h4 class="text-gray-500 font-medium mb-3 flex items-center">
                                <i class="fa fa-arrow-up text-success mr-2"></i> 买单
                            </h4>
                            <div class="space-y-2 max-h-80 overflow-y-auto pr-2">
                                <div class="flex justify-between items-center p-2 bg-green-50 rounded-md">
                                    <span class="text-success font-medium">58.20</span>
                                    <span>1,240</span>
                                    <span class="text-gray-500">72,168</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-green-50 rounded-md">
                                    <span class="text-success font-medium">58.15</span>
                                    <span>3,670</span>
                                    <span class="text-gray-500">213,411</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-green-50 rounded-md">
                                    <span class="text-success font-medium">58.10</span>
                                    <span>2,150</span>
                                    <span class="text-gray-500">124,915</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-green-50 rounded-md">
                                    <span class="text-success font-medium">58.05</span>
                                    <span>980</span>
                                    <span class="text-gray-500">56,889</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-green-50 rounded-md">
                                    <span class="text-success font-medium">58.00</span>
                                    <span>1,760</span>
                                    <span class="text-gray-500">102,080</span>
                                </div>
                                <div class="flex justify-between items-center p-2 bg-green-50 rounded-md">
                                    <span class="text-success font-medium">57.95</span>
                                    <span>2,340</span>
                                    <span class="text-gray-500">135,603</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 最近交易 -->
    <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-8">最近交易</h2>
            
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white rounded-xl card-shadow">
                    <thead>
                        <tr class="bg-gray-50 text-left">
                            <th class="py-3 px-6 text-sm font-semibold text-gray-600">时间</th>
                            <th class="py-3 px-6 text-sm font-semibold text-gray-600">品种</th>
                            <th class="py-3 px-6 text-sm font-semibold text-gray-600">价格(元/吨)</th>
                            <th class="py-3 px-6 text-sm font-semibold text-gray-600">数量(吨)</th>
                            <th class="py-3 px-6 text-sm font-semibold text-gray-600">金额(元)</th>
                            <th class="py-3 px-6 text-sm font-semibold text-gray-600">方向</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-6 text-sm text-gray-700">2025-06-20 14:32:15</td>
                            <td class="py-3 px-6 text-sm text-gray-700">CEA</td>
                            <td class="py-3 px-6 text-sm text-gray-700">58.24</td>
                            <td class="py-3 px-6 text-sm text-gray-700">1,250</td>
                            <td class="py-3 px-6 text-sm text-gray-700">72,800</td>
                            <td class="py-3 px-6 text-sm">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-success">
                                    <i class="fa fa-arrow-up mr-1"></i> 买入
                                </span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-6 text-sm text-gray-700">2025-06-20 14:28:47</td>
                            <td class="py-3 px-6 text-sm text-gray-700">CCER</td>
                            <td class="py-3 px-6 text-sm text-gray-700">42.19</td>
                            <td class="py-3 px-6 text-sm text-gray-700">860</td>
                            <td class="py-3 px-6 text-sm text-gray-700">36,283</td>
                            <td class="py-3 px-6 text-sm">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-danger">
                                    <i class="fa fa-arrow-down mr-1"></i> 卖出
                                </span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-6 text-sm text-gray-700">2025-06-20 14:25:12</td>
                            <td class="py-3 px-6 text-sm text-gray-700">GDEA</td>
                            <td class="py-3 px-6 text-sm text-gray-700">54.78</td>
                            <td class="py-3 px-6 text-sm text-gray-700">2,100</td>
                            <td class="py-3 px-6 text-sm text-gray-700">115,038</td>
                            <td class="py-3 px-6 text-sm">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-success">
                                    <i class="fa fa-arrow-up mr-1"></i> 买入
                                </span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-6 text-sm text-gray-700">2025-06-20 14:20:33</td>
                            <td class="py-3 px-6 text-sm text-gray-700">BEA</td>
                            <td class="py-3 px-6 text-sm text-gray-700">93.56</td>
                            <td class="py-3 px-6 text-sm text-gray-700">560</td>
                            <td class="py-3 px-6 text-sm text-gray-700">52,394</td>
                            <td class="py-3 px-6 text-sm">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-danger">
                                    <i class="fa fa-arrow-down mr-1"></i> 卖出
                                </span>
                            </td>
                        </tr>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="py-3 px-6 text-sm text-gray-700">2025-06-20 14:18:59</td>
                            <td class="py-3 px-6 text-sm text-gray-700">CEA</td>
                            <td class="py-3 px-6 text-sm text-gray-700">58.25</td>
                            <td class="py-3 px-6 text-sm text-gray-700">1,500</td>
                            <td class="py-3 px-6 text-sm text-gray-700">87,375</td>
                            <td class="py-3 px-6 text-sm">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-success">
                                    <i class="fa fa-arrow-up mr-1"></i> 买入
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="mt-8 flex justify-center">
                <nav class="flex items-center space-x-1">
                    <a href="#" class="px-3 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">上一页</a>
                    <a href="#" class="px-3 py-2 rounded-md bg-primary text-white text-sm font-medium">1</a>
                    <a href="#" class="px-3 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">2</a>
                    <a href="#" class="px-3 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">3</a>
                    <span class="px-3 py-2 text-sm text-gray-500">...</span>
                    <a href="#" class="px-3 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">10</a>
                    <a href="#" class="px-3 py-2 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">下一页</a>
                </nav>
            </div>
        </div>
    </section>

    <!-- 新闻资讯 -->
    <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-end mb-8">
                <div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-2">碳市场资讯</h2>
                    <p class="text-gray-500">了解最新碳市场动态和政策法规</p>
                </div>
                <a href="#" class="text-primary hover:text-secondary transition-colors hidden md:flex items-center">
                    查看全部 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- 资讯卡片1 -->
                <article class="bg-white rounded-xl overflow-hidden card-shadow hover-scale">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/600/400?random=1" alt="全国碳市场最新政策解读" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                        <div class="absolute bottom-4 left-4 right-4">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary text-white">
                                政策法规
                            </span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-dark mb-3 line-clamp-2">全国碳市场最新政策解读：配额分配方案调整</h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">近日，生态环境部发布了全国碳排放权交易市场配额分配方案的调整通知，明确了2025年度碳排放配额总量及分配方法...</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">2025-06-18</span>
                            <a href="#" class="text-primary hover:text-secondary transition-colors text-sm font-medium">阅读全文</a>
                        </div>
                    </div>
                </article>
                
                <!-- 资讯卡片2 -->
                <article class="bg-white rounded-xl overflow-hidden card-shadow hover-scale">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/600/400?random=2" alt="企业碳中和实践案例" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                        <div class="absolute bottom-4 left-4 right-4">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success text-white">
                                实践案例
                            </span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-dark mb-3 line-clamp-2">某大型钢铁企业实现碳中和路径：碳捕捉与交易双轨并行</h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">本文详细介绍了某大型钢铁企业如何通过引入先进的碳捕捉技术和积极参与碳市场交易，在实现减排目标的同时创造经济效益...</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">2025-06-15</span>
                            <a href="#" class="text-primary hover:text-secondary transition-colors text-sm font-medium">阅读全文</a>
                        </div>
                    </div>
                </article>
                
                <!-- 资讯卡片3 -->
                <article class="bg-white rounded-xl overflow-hidden card-shadow hover-scale">
                    <div class="relative h-48 overflow-hidden">
                        <img src="https://picsum.photos/600/400?random=3" alt="国际碳市场动态" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                        <div class="absolute bottom-4 left-4 right-4">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-warning text-white">
                                国际动态
                            </span>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-semibold text-dark mb-3 line-clamp-2">全球碳市场发展趋势：从区域试点到全球联动</h3>
                        <p class="text-gray-600 mb-4 line-clamp-3">随着气候变化问题日益严峻，全球碳市场正在经历从区域试点到全球联动的重要转变。本文分析了欧盟、美国等主要碳市场的最新动态...</p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">2025-06-12</span>
                            <a href="#" class="text-primary hover:text-secondary transition-colors text-sm font-medium">阅读全文</a>
                        </div>
                    </div>
                </article>
            </div>
            
            <div class="mt-8 text-center md:hidden">
                <a href="#" class="text-primary hover:text-secondary transition-colors inline-flex items-center">
                    查看全部 <i class="fa fa-angle-right ml-1"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- 底部CTA -->
    <section class="carbon-gradient text-white py-16">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">加入我们，共创绿色未来</h2>
            <p class="max-w-2xl mx-auto mb-8 text-lg text-green-100">
                立即注册成为我们的会员，参与碳市场交易，为全球碳中和目标贡献力量
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <button class="bg-white text-carbon px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors shadow-lg">
                    免费注册
                </button>
                <button class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white/10 transition-colors">
                    联系客服
                </button>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-6">
                        <i class="fa fa-leaf text-carbon text-2xl"></i>
                        <span class="text-xl font-bold">碳交易平台</span>
                    </div>
                    <p class="text-gray-400 mb-6">
                        我们致力于打造专业、透明、高效的碳交易平台，助力企业实现低碳转型，推动全球碳中和进程。
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-wechat text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-linkedin text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">快速链接</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">碳市场</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">交易中心</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">项目开发</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">资讯中心</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">政策法规</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">服务支持</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">交易指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">投诉建议</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">关于我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系方式</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="text-lg font-semibold mb-6">联系我们</h4>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-carbon mt-1 mr-3"></i>
                            <span class="text-gray-400">北京市XXX</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-carbon mr-3"></i>
                            <span class="text-gray-400">400-888-9999</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope text-carbon mr-3"></i>
                            <span class="text-gray-400">contact@carbon-trading.com</span>
                        </li>
                    </ul>
                    <div class="mt-6">
                        <h5 class="text-sm font-medium mb-3">订阅我们的资讯</h5>
                        <div class="flex">
                            <input type="email" placeholder="输入您的邮箱" class="px-4 py-2 rounded-l-md bg-gray-800 border border-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-carbon focus:border-transparent transition-all flex-1">
                            <button class="bg-carbon text-white px-4 py-2 rounded-r-md hover:bg-green-700 transition-colors">
                                订阅
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm mb-4 md:mb-0">
                    © 2025 碳交易平台. 保留所有权利.
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">隐私政策</a>
                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">服务条款</a>
                    <a href="#" class="text-gray-500 hover:text-white text-sm transition-colors">法律声明</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 导航栏滚动效果
        const navbar = document.getElementById('navbar');
        window.addEventListener('scroll', () => {
            if (window.scrollY > 10) {
                navbar.classList.add('shadow-md', 'py-2');
                navbar.classList.remove('py-3');
            } else {
                navbar.classList.remove('shadow-md', 'py-2');
                navbar.classList.add('py-3');
            }
        });
        
        // 移动端菜单
        const menuToggle = document.getElementById('menu-toggle');
        const mobileMenu = document.getElementById('mobile-menu');
        menuToggle.addEventListener('click', () => {
            if (mobileMenu.classList.contains('h-0')) {
                mobileMenu.classList.remove('h-0');
                mobileMenu.classList.add('h-auto');
                menuToggle.innerHTML = '<i class="fa fa-times"></i>';
            } else {
                mobileMenu.classList.add('h-0');
                mobileMenu.classList.remove('h-auto');
                menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
            }
        });
        
        // 交易表单计算
        const priceInput = document.getElementById('price');
        const quantityInput = document.getElementById('quantity');
        const amountInput = document.getElementById('amount');
        
        function calculateAmount() {
            const price = parseFloat(priceInput.value) || 0;
            const quantity = parseFloat(quantityInput.value) || 0;
            const amount = price * quantity;
            
            amountInput.value = amount.toFixed(2);
        }
        
        priceInput.addEventListener('input', calculateAmount);
        quantityInput.addEventListener('input', calculateAmount);
        
        // 初始化图表
        function initCharts() {
            // 图表数据
            const labels = ['', '', '', '', '', '', '', '', '', ''];
            
            // CEA图表
            const ceaData = [57.8, 57.9, 58.0, 58.1, 58.2, 58.1, 58.0, 58.1, 58.2, 58.24];
            const ceaCtx = document.getElementById('ceaChart').getContext('2d');
            new Chart(ceaCtx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        data: ceaData,
                        borderColor: '#00B42A',
                        backgroundColor: 'rgba(0, 180, 42, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { display: false },
                        y: { display: false }
                    }
                }
            });
            
            // GDEA图表
            const gdeaData = [55.1, 55.0, 54.9, 54.8, 54.7, 54.8, 54.7, 54.75, 54.8, 54.78];
            const gdeaCtx = document.getElementById('gdeaChart').getContext('2d');
            new Chart(gdeaCtx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        data: gdeaData,
                        borderColor: '#F53F3F',
                        backgroundColor: 'rgba(245, 63, 63, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { display: false },
                        y: { display: false }
                    }
                }
            });
            
            // BEA图表
            const beaData = [93.2, 93.3, 93.4, 93.5, 93.4, 93.3, 93.4, 93.5, 93.6, 93.56];
            const beaCtx = document.getElementById('beaChart').getContext('2d');
            new Chart(beaCtx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        data: beaData,
                        borderColor: '#00B42A',
                        backgroundColor: 'rgba(0, 180, 42, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { display: false },
                        y: { display: false }
                    }
                }
            });
            
            // CCER图表
            const ccerData = [40.5, 40.8, 41.2, 41.5, 41.8, 42.0, 42.2, 42.1, 42.3, 42.19];
            const ccerCtx = document.getElementById('ccerChart').getContext('2d');
            new Chart(ccerCtx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        data: ccerData,
                        borderColor: '#00B42A',
                        backgroundColor: 'rgba(0, 180, 42, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { display: false },
                        y: { display: false }
                    }
                }
            });
        }
        
        // 页面加载完成后初始化图表
        window.addEventListener('DOMContentLoaded', initCharts);
    </script>
</body>
</html>
    